<template>
  <div class="customer-service">
    <div class="game-header">
      <el-button :icon="ArrowLeft" @click="goBack">返回</el-button>
      <div class="game-title">
        <h1>🎭 客户服务模拟</h1>
        <p>模拟真实客户服务场景，提升沟通技巧和问题解决能力</p>
      </div>
      <div class="game-stats">
        <el-statistic title="满意度" :value="gameStats.satisfaction" suffix="%" />
        <el-statistic title="完成订单" :value="gameStats.completedOrders" />
        <el-statistic title="获得积分" :value="gameStats.points" />
      </div>
    </div>

    <!-- 游戏模式选择 -->
    <div v-if="!gameStarted" class="mode-selection">
      <h2>选择游戏模式</h2>
      <div class="modes-grid">
        <div 
          v-for="mode in gameModes" 
          :key="mode.id"
          class="mode-card"
          @click="startGame(mode)"
        >
          <div class="mode-icon" :style="{ background: mode.color }">
            <component :is="mode.icon" />
          </div>
          <h3>{{ mode.name }}</h3>
          <p>{{ mode.description }}</p>
          <div class="mode-meta">
            <el-tag :type="mode.difficultyType" size="small">{{ mode.difficulty }}</el-tag>
            <span>{{ mode.duration }}分钟</span>
            <span>💰 {{ mode.points }}积分</span>
          </div>
        </div>
      </div>
    </div>

    <!-- 游戏界面 -->
    <div v-else class="game-interface">
      <div class="game-sidebar">
        <div class="timer-panel">
          <h3>⏰ 剩余时间</h3>
          <div class="timer">{{ formatTime(remainingTime) }}</div>
        </div>

        <div class="stats-panel">
          <h3>📊 当前统计</h3>
          <div class="stat-item">
            <span>处理客户:</span>
            <strong>{{ currentStats.served }}/{{ currentStats.total }}</strong>
          </div>
          <div class="stat-item">
            <span>满意:</span>
            <el-progress :percentage="currentStats.satisfactionRate" :color="getProgressColor(currentStats.satisfactionRate)" />
          </div>
          <div class="stat-item">
            <span>连续好评:</span>
            <strong>{{ currentStats.streak }}</strong>
          </div>
        </div>

        <div class="tips-panel">
          <h3>💡 服务技巧</h3>
          <ul>
            <li>保持礼貌和耐心</li>
            <li>倾听客户需求</li>
            <li>提供专业建议</li>
            <li>快速响应问题</li>
            <li>超出客户期待</li>
          </ul>
        </div>

        <el-button type="danger" @click="quitGame">退出游戏</el-button>
      </div>

      <div class="game-main">
        <!-- 客户信息 -->
        <div class="customer-panel">
          <div class="customer-avatar">
            <el-avatar :src="currentCustomer.avatar" :size="80" />
            <div class="customer-mood" :class="currentCustomer.mood">
              {{ getMoodEmoji(currentCustomer.mood) }}
            </div>
          </div>
          <div class="customer-info">
            <h3>{{ currentCustomer.name }}</h3>
            <p>{{ currentCustomer.description }}</p>
            <el-tag :type="getMoodType(currentCustomer.mood)" size="small">
              {{ currentCustomer.mood }}
            </el-tag>
          </div>
        </div>

        <!-- 对话区域 -->
        <div class="conversation">
          <div class="messages-container" ref="messagesContainer">
            <div 
              v-for="(message, index) in messages" 
              :key="index"
              class="message"
              :class="message.sender"
            >
              <div class="message-content">
                <p>{{ message.text }}</p>
                <span class="message-time">{{ message.time }}</span>
              </div>
            </div>
          </div>

          <!-- 回复选项 -->
          <div v-if="showOptions" class="response-options">
            <h4>选择你的回复：</h4>
            <div 
              v-for="(option, index) in currentOptions" 
              :key="index"
              class="option-card"
              :class="{ selected: selectedOption === index }"
              @click="selectOption(index)"
            >
              <div class="option-header">
                <span class="option-label">选项 {{ index + 1 }}</span>
                <el-tag v-if="option.tone" size="small">{{ option.tone }}</el-tag>
              </div>
              <p>{{ option.text }}</p>
              <div v-if="option.effect" class="option-effect">
                <el-icon v-if="option.effect === 'positive'"><CircleCheck /></el-icon>
                <el-icon v-else-if="option.effect === 'negative'"><CircleClose /></el-icon>
                <el-icon v-else><QuestionFilled /></el-icon>
                <span>{{ option.effectText }}</span>
              </div>
            </div>
          </div>

          <!-- 确认按钮 -->
          <div v-if="showOptions" class="action-buttons">
            <el-button 
              type="primary" 
              size="large"
              :disabled="selectedOption === null"
              @click="confirmResponse"
            >
              确认回复
            </el-button>
          </div>
        </div>
      </div>
    </div>

    <!-- 结果对话框 -->
    <el-dialog
      v-model="showResultDialog"
      title="本轮结果"
      width="500px"
      :close-on-click-modal="false"
    >
      <div class="result-content">
        <div class="result-icon" :class="roundResult.type">
          <el-icon v-if="roundResult.type === 'success'"><CircleCheck /></el-icon>
          <el-icon v-else-if="roundResult.type === 'warning'"><Warning /></el-icon>
          <el-icon v-else><CircleClose /></el-icon>
        </div>
        <h3>{{ roundResult.title }}</h3>
        <p>{{ roundResult.message }}</p>
        <div class="result-stats">
          <div class="result-stat">
            <span>满意度变化:</span>
            <strong :class="{ positive: roundResult.satisfactionChange > 0, negative: roundResult.satisfactionChange < 0 }">
              {{ roundResult.satisfactionChange > 0 ? '+' : '' }}{{ roundResult.satisfactionChange }}%
            </strong>
          </div>
          <div class="result-stat">
            <span>获得积分:</span>
            <strong class="positive">+{{ roundResult.points }}</strong>
          </div>
        </div>
      </div>
      <template #footer>
        <el-button type="primary" @click="nextCustomer">
          {{ currentStats.served >= currentStats.total ? '查看总结' : '下一位客户' }}
        </el-button>
      </template>
    </el-dialog>

    <!-- 游戏结束对话框 -->
    <el-dialog
      v-model="showGameOverDialog"
      title="游戏结束"
      width="600px"
      :close-on-click-modal="false"
      :show-close="false"
    >
      <div class="game-over-content">
        <div class="final-score">
          <h2>最终得分</h2>
          <div class="score-display">{{ finalScore }}</div>
          <el-rate v-model="performanceRating" disabled show-score />
        </div>
        <div class="final-stats">
          <div class="final-stat-item">
            <span>处理客户:</span>
            <strong>{{ currentStats.served }}</strong>
          </div>
          <div class="final-stat-item">
            <span>满意客户:</span>
            <strong>{{ currentStats.satisfied }}</strong>
          </div>
          <div class="final-stat-item">
            <span>平均满意度:</span>
            <strong>{{ currentStats.satisfactionRate }}%</strong>
          </div>
          <div class="final-stat-item">
            <span>最高连续好评:</span>
            <strong>{{ currentStats.maxStreak }}</strong>
          </div>
        </div>
        <el-alert
          :title="`获得 ${finalScore} 积分！`"
          type="success"
          :closable="false"
          show-icon
        />
      </div>
      <template #footer>
        <el-button @click="restartGame">重新开始</el-button>
        <el-button type="primary" @click="goBack">返回游戏中心</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, computed, nextTick } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
import {
  ArrowLeft, Service, Clock, TrendCharts,
  CircleCheck, CircleClose, Warning, QuestionFilled
} from '@element-plus/icons-vue'

const router = useRouter()

// 游戏统计
const gameStats = ref({
  satisfaction: 92,
  completedOrders: 48,
  points: 1240
})

// 游戏模式
const gameModes = ref([
  {
    id: 1,
    name: '新手训练',
    description: '简单的客户服务场景，适合初学者',
    difficulty: '简单',
    difficultyType: 'success',
    duration: 5,
    points: 90,
    color: 'linear-gradient(135deg, #43e97b 0%, #38f9d7 100%)',
    icon: 'Service'
  },
  {
    id: 2,
    name: '日常服务',
    description: '处理常见的客户问题和需求',
    difficulty: '中等',
    difficultyType: 'warning',
    duration: 10,
    points: 150,
    color: 'linear-gradient(135deg, #fa709a 0%, #fee140 100%)',
    icon: 'ChatDotRound'
  },
  {
    id: 3,
    name: '投诉处理',
    description: '应对困难的客户和投诉场景',
    difficulty: '困难',
    difficultyType: 'danger',
    duration: 15,
    points: 250,
    color: 'linear-gradient(135deg, #f093fb 0%, #f5576c 100%)',
    icon: 'Warning'
  }
])

// 游戏状态
const gameStarted = ref(false)
const currentMode = ref(null)
const remainingTime = ref(300)
const showOptions = ref(true)
const selectedOption = ref(null)
const showResultDialog = ref(false)
const showGameOverDialog = ref(false)
const messagesContainer = ref(null)

// 当前统计
const currentStats = ref({
  served: 0,
  total: 5,
  satisfied: 0,
  satisfactionRate: 100,
  streak: 0,
  maxStreak: 0
})

// 当前客户
const currentCustomer = ref({
  name: '李女士',
  avatar: 'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png',
  mood: '普通',
  description: '想要购买一件连衣裙，但不确定尺码'
})

// 对话消息
const messages = ref([
  {
    sender: 'customer',
    text: '你好，我想买这件连衣裙，但不知道该选什么尺码。',
    time: '14:30'
  }
])

// 回复选项
const currentOptions = ref([
  {
    text: '请问您的身高体重是多少？我可以帮您推荐合适的尺码。',
    tone: '专业',
    effect: 'positive',
    effectText: '满意度 +15%'
  },
  {
    text: '这个...我也不太清楚，您可以都试试看。',
    tone: '敷衍',
    effect: 'negative',
    effectText: '满意度 -20%'
  },
  {
    text: 'M码应该合适，大部分人都穿M码。',
    tone: '随意',
    effect: 'neutral',
    effectText: '满意度不变'
  }
])

// 本轮结果
const roundResult = ref({
  type: 'success',
  title: '客户很满意！',
  message: '您的专业服务态度获得了客户的认可',
  satisfactionChange: 15,
  points: 30
})

const finalScore = ref(0)
const performanceRating = ref(4)

// 格式化时间
const formatTime = (seconds) => {
  const mins = Math.floor(seconds / 60)
  const secs = seconds % 60
  return `${mins.toString().padStart(2, '0')}:${secs.toString().padStart(2, '0')}`
}

// 获取进度条颜色
const getProgressColor = (percentage) => {
  if (percentage >= 80) return '#67c23a'
  if (percentage >= 60) return '#e6a23c'
  return '#f56c6c'
}

// 获取心情表情
const getMoodEmoji = (mood) => {
  const map = {
    '高兴': '😊',
    '普通': '😐',
    '不满': '😤',
    '生气': '😠'
  }
  return map[mood] || '😐'
}

// 获取心情类型
const getMoodType = (mood) => {
  const map = {
    '高兴': 'success',
    '普通': 'info',
    '不满': 'warning',
    '生气': 'danger'
  }
  return map[mood] || 'info'
}

// 开始游戏
const startGame = (mode) => {
  currentMode.value = mode
  gameStarted.value = true
  remainingTime.value = mode.duration * 60
  currentStats.value = {
    served: 0,
    total: Math.ceil(mode.duration / 2),
    satisfied: 0,
    satisfactionRate: 100,
    streak: 0,
    maxStreak: 0
  }
  ElMessage.success(`游戏开始！处理 ${currentStats.value.total} 位客户`)
  
  // 开始倒计时
  startTimer()
}

// 开始计时器
const startTimer = () => {
  const timer = setInterval(() => {
    if (remainingTime.value > 0 && gameStarted.value) {
      remainingTime.value--
    } else {
      clearInterval(timer)
      if (gameStarted.value) {
        endGame()
      }
    }
  }, 1000)
}

// 选择选项
const selectOption = (index) => {
  selectedOption.value = index
}

// 确认回复
const confirmResponse = async () => {
  const option = currentOptions.value[selectedOption.value]
  
  // 添加服务员消息
  messages.value.push({
    sender: 'agent',
    text: option.text,
    time: new Date().toLocaleTimeString('zh-CN', { hour: '2-digit', minute: '2-digit' })
  })
  
  showOptions.value = false
  
  // 滚动到底部
  await nextTick()
  if (messagesContainer.value) {
    messagesContainer.value.scrollTop = messagesContainer.value.scrollHeight
  }
  
  // 显示客户反馈
  setTimeout(() => {
    const feedback = getFeedback(option.effect)
    messages.value.push({
      sender: 'customer',
      text: feedback,
      time: new Date().toLocaleTimeString('zh-CN', { hour: '2-digit', minute: '2-digit' })
    })
    
    // 计算结果
    calculateResult(option)
    
    setTimeout(() => {
      showResultDialog.value = true
    }, 1000)
  }, 1500)
}

// 获取客户反馈
const getFeedback = (effect) => {
  const feedbacks = {
    positive: [
      '太感谢了！您的服务真的很专业！',
      '非常满意，谢谢您的耐心解答！',
      '您真是太贴心了，我会推荐朋友来的！'
    ],
    neutral: [
      '好的，我知道了。',
      '嗯，我考虑一下吧。',
      '那我先看看其他的。'
    ],
    negative: [
      '这种服务态度真是让人失望。',
      '算了，我去别家看看吧。',
      '你们店员都这么不专业的吗？'
    ]
  }
  const list = feedbacks[effect] || feedbacks.neutral
  return list[Math.floor(Math.random() * list.length)]
}

// 计算结果
const calculateResult = (option) => {
  const change = option.effect === 'positive' ? 15 : option.effect === 'negative' ? -20 : 0
  const points = option.effect === 'positive' ? 30 : option.effect === 'negative' ? 5 : 15
  
  roundResult.value = {
    type: option.effect === 'positive' ? 'success' : option.effect === 'negative' ? 'error' : 'warning',
    title: option.effect === 'positive' ? '客户很满意！' : option.effect === 'negative' ? '客户不满意' : '还可以做得更好',
    message: option.effect === 'positive' ? '您的专业服务态度获得了客户的认可' : 
             option.effect === 'negative' ? '客户对您的服务感到失望' : 
             '服务态度一般，还有提升空间',
    satisfactionChange: change,
    points: points
  }
  
  // 更新统计
  if (option.effect === 'positive') {
    currentStats.value.satisfied++
    currentStats.value.streak++
    currentStats.value.maxStreak = Math.max(currentStats.value.maxStreak, currentStats.value.streak)
  } else {
    currentStats.value.streak = 0
  }
  
  const newRate = Math.round((currentStats.value.satisfied / (currentStats.value.served + 1)) * 100)
  currentStats.value.satisfactionRate = newRate
}

// 下一位客户
const nextCustomer = () => {
  currentStats.value.served++
  showResultDialog.value = false
  
  if (currentStats.value.served >= currentStats.value.total) {
    endGame()
    return
  }
  
  // 重置对话
  messages.value = []
  selectedOption.value = null
  showOptions.value = true
  
  // 生成新客户
  const customers = [
    {
      name: '王先生',
      avatar: 'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png',
      mood: '普通',
      description: '想退换一件有质量问题的商品',
      message: '这件衣服洗了一次就掉色了，我要退货！'
    },
    {
      name: '张小姐',
      avatar: 'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png',
      mood: '高兴',
      description: '想咨询新品优惠活动',
      message: '你好，请问有什么优惠活动吗？'
    }
  ]
  
  const newCustomer = customers[Math.floor(Math.random() * customers.length)]
  currentCustomer.value = newCustomer
  messages.value.push({
    sender: 'customer',
    text: newCustomer.message,
    time: new Date().toLocaleTimeString('zh-CN', { hour: '2-digit', minute: '2-digit' })
  })
  
  // 生成新选项
  generateOptions()
}

// 生成回复选项
const generateOptions = () => {
  currentOptions.value = [
    {
      text: '非常抱歉给您带来不便，我马上为您处理退货。',
      tone: '专业',
      effect: 'positive',
      effectText: '满意度 +15%'
    },
    {
      text: '这个...可能是您洗衣方式不对。',
      tone: '推诿',
      effect: 'negative',
      effectText: '满意度 -20%'
    },
    {
      text: '您可以去前台办理退货。',
      tone: '冷淡',
      effect: 'neutral',
      effectText: '满意度不变'
    }
  ]
}

// 结束游戏
const endGame = () => {
  gameStarted.value = false
  finalScore.value = Math.round(currentStats.value.satisfactionRate * 10 + currentStats.value.maxStreak * 20)
  performanceRating.value = currentStats.value.satisfactionRate >= 90 ? 5 : 
                           currentStats.value.satisfactionRate >= 80 ? 4 :
                           currentStats.value.satisfactionRate >= 70 ? 3 :
                           currentStats.value.satisfactionRate >= 60 ? 2 : 1
  showGameOverDialog.value = true
  
  // 更新总体统计
  gameStats.value.points += finalScore.value
  gameStats.value.completedOrders += currentStats.value.served
  gameStats.value.satisfaction = Math.round((gameStats.value.satisfaction + currentStats.value.satisfactionRate) / 2)
}

// 重新开始
const restartGame = () => {
  showGameOverDialog.value = false
  gameStarted.value = false
}

// 退出游戏
const quitGame = () => {
  ElMessage.warning('游戏已退出')
  gameStarted.value = false
}

// 返回
const goBack = () => {
  router.push('/learning/games/center')
}
</script>

<style scoped>
.customer-service {
  padding: 20px;
  max-width: 1600px;
  margin: 0 auto;
}

.game-header {
  display: flex;
  align-items: center;
  gap: 30px;
  margin-bottom: 30px;
  padding: 24px;
  background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
  border-radius: 12px;
  color: white;
}

.game-title {
  flex: 1;
}

.game-title h1 {
  margin: 0 0 8px 0;
  font-size: 28px;
}

.game-title p {
  margin: 0;
  opacity: 0.9;
}

.game-stats {
  display: flex;
  gap: 40px;
}

.game-stats :deep(.el-statistic__head) {
  color: rgba(255, 255, 255, 0.8);
}

.game-stats :deep(.el-statistic__content) {
  color: white;
  font-weight: bold;
}

/* 模式选择 */
.mode-selection {
  padding: 40px;
  text-align: center;
}

.mode-selection h2 {
  margin-bottom: 40px;
  font-size: 24px;
  color: #303133;
}

.modes-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 24px;
}

.mode-card {
  background: white;
  border-radius: 12px;
  padding: 30px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
  cursor: pointer;
  transition: all 0.3s ease;
}

.mode-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.15);
}

.mode-icon {
  width: 80px;
  height: 80px;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 20px;
  font-size: 40px;
  color: white;
}

.mode-card h3 {
  margin: 0 0 12px 0;
  font-size: 20px;
  color: #303133;
}

.mode-card p {
  margin: 0 0 20px 0;
  color: #606266;
  line-height: 1.6;
}

.mode-meta {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  color: #909399;
  font-size: 14px;
}

/* 游戏界面 */
.game-interface {
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: 20px;
  height: calc(100vh - 200px);
}

.game-sidebar {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.timer-panel,
.stats-panel,
.tips-panel {
  background: white;
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.timer-panel h3,
.stats-panel h3,
.tips-panel h3 {
  margin: 0 0 16px 0;
  font-size: 16px;
  color: #303133;
}

.timer {
  font-size: 36px;
  font-weight: bold;
  text-align: center;
  color: #409eff;
  font-family: 'Consolas', monospace;
}

.stat-item {
  margin-bottom: 12px;
}

.stat-item span {
  display: block;
  margin-bottom: 4px;
  color: #606266;
  font-size: 14px;
}

.tips-panel ul {
  margin: 0;
  padding-left: 20px;
  color: #606266;
  font-size: 14px;
  line-height: 2;
}

.game-main {
  background: white;
  border-radius: 12px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  overflow: hidden;
}

/* 客户面板 */
.customer-panel {
  display: flex;
  gap: 20px;
  padding-bottom: 20px;
  border-bottom: 2px solid #f0f2f5;
}

.customer-avatar {
  position: relative;
}

.customer-mood {
  position: absolute;
  bottom: -5px;
  right: -5px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.customer-info h3 {
  margin: 0 0 8px 0;
  font-size: 18px;
  color: #303133;
}

.customer-info p {
  margin: 0 0 8px 0;
  color: #606266;
}

/* 对话区域 */
.conversation {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 20px;
  min-height: 0;
}

.messages-container {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
  background: #f5f7fa;
  border-radius: 8px;
}

.message {
  margin-bottom: 16px;
  display: flex;
}

.message.customer {
  justify-content: flex-start;
}

.message.agent {
  justify-content: flex-end;
}

.message-content {
  max-width: 70%;
  padding: 12px 16px;
  border-radius: 8px;
  background: white;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
}

.message.agent .message-content {
  background: #409eff;
  color: white;
}

.message-content p {
  margin: 0 0 4px 0;
  line-height: 1.6;
}

.message-time {
  font-size: 12px;
  opacity: 0.6;
}

/* 回复选项 */
.response-options {
  padding: 16px;
  background: #f5f7fa;
  border-radius: 8px;
}

.response-options h4 {
  margin: 0 0 12px 0;
  font-size: 14px;
  color: #606266;
}

.option-card {
  background: white;
  border-radius: 8px;
  padding: 16px;
  margin-bottom: 12px;
  cursor: pointer;
  transition: all 0.3s ease;
  border: 2px solid transparent;
}

.option-card:hover {
  border-color: #409eff;
  transform: translateX(4px);
}

.option-card.selected {
  border-color: #409eff;
  background: #ecf5ff;
}

.option-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.option-label {
  font-weight: bold;
  color: #409eff;
  font-size: 14px;
}

.option-card p {
  margin: 0 0 8px 0;
  color: #303133;
  line-height: 1.6;
}

.option-effect {
  display: flex;
  align-items: center;
  gap: 4px;
  color: #909399;
  font-size: 13px;
}

.action-buttons {
  display: flex;
  justify-content: center;
}

/* 结果对话框 */
.result-content {
  text-align: center;
  padding: 20px;
}

.result-icon {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  margin: 0 auto 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 40px;
}

.result-icon.success {
  background: #f0f9ff;
  color: #67c23a;
}

.result-icon.warning {
  background: #fef0f0;
  color: #e6a23c;
}

.result-icon.error {
  background: #fef0f0;
  color: #f56c6c;
}

.result-content h3 {
  margin: 0 0 12px 0;
  font-size: 20px;
  color: #303133;
}

.result-content p {
  margin: 0 0 24px 0;
  color: #606266;
  line-height: 1.6;
}

.result-stats {
  display: flex;
  justify-content: space-around;
  padding: 20px 0;
}

.result-stat {
  text-align: center;
}

.result-stat span {
  display: block;
  margin-bottom: 8px;
  color: #909399;
  font-size: 14px;
}

.result-stat strong {
  font-size: 24px;
  font-weight: bold;
}

.result-stat .positive {
  color: #67c23a;
}

.result-stat .negative {
  color: #f56c6c;
}

/* 游戏结束 */
.game-over-content {
  padding: 20px;
}

.final-score {
  text-align: center;
  margin-bottom: 30px;
}

.final-score h2 {
  margin: 0 0 16px 0;
  color: #303133;
}

.score-display {
  font-size: 60px;
  font-weight: bold;
  color: #409eff;
  margin-bottom: 16px;
}

.final-stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  margin-bottom: 24px;
}

.final-stat-item {
  padding: 16px;
  background: #f5f7fa;
  border-radius: 8px;
  text-align: center;
}

.final-stat-item span {
  display: block;
  margin-bottom: 8px;
  color: #909399;
  font-size: 14px;
}

.final-stat-item strong {
  font-size: 24px;
  color: #303133;
}

@media (max-width: 1200px) {
  .game-interface {
    grid-template-columns: 1fr;
  }
}
</style>

